<template>
	<view class="index">
		<view v-if="currentIndex == '0'" :style="{display: currentIndex === 0 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<!-- 大医说 20-->
				<Home ref="home" liveTypeId="20"></Home>
				<!-- <Basic ref="basic"></Basic> -->
			</scroll-view>
		</view>
		<view v-if="currentIndex == '1'" :style="{display: currentIndex === 1 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<!-- <components ref="components"></components> -->
				<!-- 健康宣教 仅保留了用户的21 :liveTypeId="vuex_user.type == '2'?'22':'21'"-->
				<Home ref="home" liveTypeId="21"></Home>
			</scroll-view>
		</view>
		<view v-if="currentIndex == '2'" :style="{display: currentIndex === 2 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<!-- 教学&会议 -->
				<Home ref="home" liveTypeId="23"></Home>
			</scroll-view>
		</view>
		<view v-if="currentIndex == '3'" :style="{display: currentIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<!-- <vip ref="vip"></vip> -->
				<User ref="user"></User>
				<!-- <Expert ref="expert"></Expert> -->
			</scroll-view>
		</view>
		<!-- <view v-if="tabberPageLoadFlag[3]" :style="{display: currentIndex === 3 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<templatePage ref="template"></templatePage>
				<User ref="user"></User>
			</scroll-view>
		</view>
		<view v-if="tabberPageLoadFlag[4]" :style="{display: currentIndex === 4 ? '' : 'none'}">
			<scroll-view class="custom-tabbar-page" scroll-y enable-back-to-top @scrolltolower="tabbarPageScrollLower">
				<tuniao ref="about"></tuniao>
				<Basic ref="basic"></Basic>
			</scroll-view>
		</view> -->

		<tn-tabbar v-model="currentIndex" :list="tabbarList" activeColor="#838383" inactiveColor="#AAAAAA"
			activeIconColor="tn-cool-bg-color-7" :animation="true" :safeAreaInsetBottom="true" @change="switchTabbar">
		</tn-tabbar>

	</view>
</template>

<script>
	import Home from '@/pages/home/home.vue'
	import User from '../user/user.vue'
	import Expert from '../expert/expert.vue'
	import {
		getTags,
	} from '@/util/index.js'
	// import Basic from '../basic/basic.vue'
	// import Components from '../components/components.vue'
	// import TemplatePage from '../template/template.vue'
	// import Vip from '../vip/vip.vue'
	// import Tuniao from '../tuniao/tuniao.vue'

	export default {
		components: {
			Home,
			User,
			Expert
			// Basic,
			// Components,
			// TemplatePage,
			// Vip,
			// Tuniao
		},
		data() {
			return {
				// 底部tabbar菜单数据
				tabbarList: [{
						title: '大医说',
						activeIcon: 'my-love',
						inactiveIcon: 'my-love'
					},
					{
						title: '健康宣教',
						activeIcon: 'leaf-simple',
						inactiveIcon: 'leaf-simple'
					},
					{
						title: '教学&会议',
						activeIcon: 'molecule',
						inactiveIcon: 'molecule'
					},
					{
						title: '我',
						activeIcon: 'my-simple',
						inactiveIcon: 'my-simple',
						// count: 100
					},
					// {
					// 	title: '临床教学',
					// 	activeIcon: 'vip-fill',
					// 	inactiveIcon: 'vip',
					// 	activeIconColor: '#FFFFFF',
					// 	inactiveIconColor: '#FFFFFF',
					// 	iconSize: 50,
					// 	out: true
					// },
				],
				// tabbar当前被选中的序号
				currentIndex: 0,
				// 自定义底栏对应页面的加载情况
				tabberPageLoadFlag: []
			}
		},
		onLoad(options) {
			const index = Number(options.index || 0)
			console.log(this.vuex_user.type)
			if (this.vuex_user.type == '2') {
				// this.tabbarList = [{
				// 		title: '临床教学',
				// 		activeIcon: 'medical',
				// 		inactiveIcon: 'medical',
				// 	},
				// 	{
				// 		title: '健康宣教',
				// 		activeIcon: 'leaf-simple',
				// 		inactiveIcon: 'leaf-simple'
				// 	},
				// 	{
				// 		title: '我',
				// 		activeIcon: 'my-simple',
				// 		inactiveIcon: 'my-simple',
				// 		// count: 100
				// 	}
				// ]
			} else {
				// this.tabbarList = [{
				// 		title: '大医说',
				// 		activeIcon: 'my-love',
				// 		inactiveIcon: 'my-love'
				// 	},
				// 	{
				// 		title: '健康宣教',
				// 		activeIcon: 'leaf-simple',
				// 		inactiveIcon: 'leaf-simple'
				// 	},
				// 	{
				// 		title: '我',
				// 		activeIcon: 'my-simple',
				// 		inactiveIcon: 'my-simple',
				// 		// count: 100
				// 	}
				// ]
			}
			// 根据底部tabbar菜单列表设置对应页面的加载情况
			this.tabberPageLoadFlag = this.tabbarList.map((item, tabbar_index) => {
				return index === tabbar_index
			})
			this.switchTabbar(index)
			// this.getTagsFunc()
		},
		methods: {
			// 切换导航
			switchTabbar(index) {
				this._switchTabbarPage(index)
			},


			// 导航页面滚动到底部
			tabbarPageScrollLower(e) {
				console.log('dao到底了')
				this.$refs.home.loadMore()
			},

			// 切换导航页面
			_switchTabbarPage(index) {
				const selectPageFlag = this.tabberPageLoadFlag[index]
				if (selectPageFlag === undefined) {
					return
				}
				if (selectPageFlag === false) {
					this.tabberPageLoadFlag[index] = true
				}
				this.currentIndex = index
			},
			// getTagsFunc() {
			// 	getTags({
			// 		page: 1,
			// 		limit:20,
			// 		isdel:0
			// 	}).then((res) => {
			// 		let tagList = []
			// 		res.list.forEach((item)=>{
			// 			tagList.push()
			// 		})
			// 	})
			// }
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		overflow: hidden;
		height: 100%;
	}

	.custom-tabbar-page {
		height: calc(100vh - (100rpx + env(safe-area-inset-bottom) / 2));
	}
</style>
